<template>
  <div>
    <Table
      :tableData="tableData"
      :setOption="setOption"
      :title="title"
      @add="add"
       @edit="edit"
      @addTableData="addTableData"
      @handleDelete="handleDelete"
      @editTableData="editTableData"
      @checkDelete="checkDelete"
      @moreOperate="moreOperate"
     
    >
  
      <el-table-column prop="jobName" label="岗位名称" width="160" />
      <!-- <el-table-column prop="jobCode" label="岗位编码" width="300" />
      <el-table-column prop="level" label="有权部门层级" width="200" />
      <el-table-column prop="businessType" label="业务类型" width="100" /> -->
      <el-table-column prop="notes" label="备注" />
      <template #dialog>
        <el-form :model="form">
          <el-form-item label="岗位名称">
              <el-input type="text" v-model="form.jobName"  />
          </el-form-item>
          <el-form-item label="备注">
              <el-input type="textarea" v-model="form.notes"  />
          </el-form-item>
           <el-form-item label="状态" >
          <el-switch
            v-model="form.operate"
            inline-prompt
            active-text="是"
            inactive-text="否"
          />
        </el-form-item>
        </el-form>
      </template>
    </Table>
    <Dialog
      :isVisible="isVisible"
      :title="optionsTitle"
      @submit="submitList"
      @close="cancel"
      :showButton="showButton"
      width="50%"
    >

      <el-transfer
      v-if="isOptions ==0"
        v-model="transferValue"
        style="text-align: center;"
        filterable
        :titles="['所有人员', transferTitle]"
        :button-texts="['移除', '加入']"
        :format="{
          noChecked: '${total}',
          hasChecked: '${checked}/${total}',
        }"
        :props="{
      key: 'name',  
      label: 'name',
    }"
        :data="data"
        @change="handleChange"
      >
        <template #default="{ option }">
          <span>{{option.name}}</span>
        </template>

      </el-transfer>
       <el-form v-else :model="form">
       <el-form-item label="角色分配">
              <el-radio-group v-model="form.level">
                <el-radio v-for="item in roleMsgData" :key="item" :label="item.level">{{item.roleName}}</el-radio>
              </el-radio-group>
         
        </el-form-item>
     </el-form>
    </Dialog>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref, toRefs, computed } from "vue";
import { Plus, Edit, ArrowDownBold } from "@element-plus/icons-vue";
import Dialog from "@/components/Dialog.vue";
import Table from "@/components/Table.vue";
import {getPostMsgData,getUserdepData} from '@/api/dataList.js'
import {updataPostMsg} from '@/api/updata.js'

const setOption = [
  {
    value: "0",
    label: "人员分配",
  },
  {
    value: "1",
    label: "角色分配",
  },
];


// 存放岗位数据
const tableData = ref();


// 角色数据
const roleMsgData = computed(() => {
  return JSON.parse(localStorage.getItem("roleMsgData")).filter(i => i.operate)
  
})


// 岗位表单数据
const form = ref({
jobName:"",
jobCode:"",
level:"",
businessType:"",
notes:"",
operate:"",
})


const showButton = ref(true);

const isVisible = ref(false);
const title = ref("");
const optionsTitle = ref("");
const currentIndex = ref("")

// 穿梭框选中数据
const transferValue = ref([])
// 穿梭框未被选中数据
const data = ref([])

onMounted(() => {
  getData()
})

// 获取表格数据
const getData = (data) => {
  getPostMsgData().then((res) => {
    console.log("接口返回数据为：", res);
    tableData.value = res.data
    localStorage.setItem("postMsgData",JSON.stringify(res.data))
  });
};
// 点击新增按钮
const add = () => {
  title.value = "新增";
  form.value = {}
}

// 点击修改按钮
const edit = (scope,index) => {
  title.value = "修改";
  form.value = {...form.value,...scope}
};

// 修改数据
const editTableData = (val) => {
  tableData.value[val] = {...form.value}
  // 调用修改接口
}

// 删除数据
const handleDelete = (scope,index) => {
tableData.value.splice(index,1)
// 调用删除接口
}

// 新增数据
const addTableData = () => {
tableData.value.push(form.value)
// 调用新增接口
}

// 批量删除
const checkDelete = (data) => {
  data.forEach(item => {
      tableData.value = tableData.value.filter(i => i !==item)
    })
  // 调用批量删除接口
}

const isOptions = ref('')

// 穿梭框标题
const transferTitle =ref("")

// 记录当前所操作的数据
const currentLevel = ref("")

// 点击操作栏更多打开对应的Dialog
const moreOperate = (row,index,command) => {
 isOptions.value = command
 optionsTitle.value = setOption[command].label;
  isVisible.value = true;
if(command == "0") {
  showButton.value = false
 currentLevel.value = row.level
   transferTitle.value =row.jobName
      getUserdepData().then(res => {
        data.value=res.data.list
    res.data.list.forEach(item => {
      if(item.post == row.level) {
        transferValue.value.push(item.name)  
      }
    })
  })
} else if(command == "1") {
    form.value.level = row.level
    showButton.value = false
}
};


const handleChange = (
  value,
  direction,
  movedKeys
) => {
  // console.log(value, direction, movedKeys)
  console.log(transferValue.value);
}



// Dialog栏的提交操作
const submitList = () => {
  // 判断是哪一种操作
  if(isOptions.value == '0') { 
  const data = {
    level:currentLevel.value,
    transferList: transferValue.value
  }
    updataPostMsg(data).then(res => {
      data.value = res.data
      ElMessage.success("修改成功")
    })
  } else if(isOptions.value =='1') {
    // 
    ElMessage.success('xxxx')
  }
  isVisible.value = false;
}
const cancel = () => {
  isVisible.value = false;
  transferValue.value = []
};
</script>

<style lang="scss" scoped>
.operate-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}
.page_wrapper_right {
  // background: #fff;
  border: 1px solid #dfdfdf;
  .table_filter {
    background: #fff;
    padding: 10px;
    v-deep .el-input__inner {
      width: 200px !important;
    }
  }
}
</style>
